<template>
  <div class="block">
    <div>
    <el-timeline v-for="item in home" :key="item.id" >
      <el-timeline-item  :timestamp="item.createBy" placement="top">
        <el-card>
          <div  style="display: flex;justify-content: space-between" @click="details(item.id)">
            <div>
              <h4>{{item.title}}</h4>
              <p>{{item.description}}</p>
              <icon class="el-icon-view"/><span>{{item.watch}}</span>
              <icon style="margin-left: 10px" class="el-icon-chat-dot-square"/><span>{{item.discuss}}</span>
              <icon style="margin-left: 10px" class="el-icon-star-on"/><span>{{item.likes}}</span>
            </div>
            <div>
              <img style="width: 200px;height: 120px" :src="item.coverUrl"/>
            </div>
          </div>
          </el-card>
      </el-timeline-item>
    </el-timeline>
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        page-sizes="5"
        @current-change="handleCurrentChange"
        :page-size="5"
        :total="total">
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
  import {homeDatas,pageSelect} from '../api/axiosRequest'
    export default {
        name: "",
      data(){
          return{
            blogs:[
              {
                postedTime:"2020-07-20",
                headline:"SpringBoot详细笔记",
                subtitle:"SpringBoot核心技术",
                imgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3001975187,3830768719&fm=26&gp=0.jpg",
                pageView:2000,
                comment:30,
                like:1000
              },
              {
                postedTime:"2020-07-19",
                headline:"SpringBoot整合MQ实际案例",
                subtitle:"图形化界面详细教程",
                imgUrl:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3034677756,502279996&fm=26&gp=0.jpg",
                pageView:1000,
                comment:20,
                like:1020
              },
              {
                postedTime:"2020-07-18",
                headline:"SpringcloudAlibaba详细教程",
                subtitle:"多案例多实践",
                imgUrl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3941328664,1636555003&fm=26&gp=0.jpg",
                pageView:25000,
                comment:1000,
                like:5000
              },
              {
                postedTime:"2020-07-16",
                headline:"nacos集群配置",
                subtitle:"避免采坑指南",
                imgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2416732733,3060963787&fm=26&gp=0.jpg",
                pageView:6000,
                comment:180,
                like:2010
              },
              {
                postedTime:"2020-07-15",
                headline:"docker安装及详细使用",
                subtitle:"docker命令大集合",
                imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=379839393,2051101065&fm=26&gp=0.jpg",
                pageView:800,
                comment:56,
                like:2001
              },
            ],
            home:[],
            current:1,
            total:0,
          }
      },
      created() {
          this.homeDta();
      },
      methods:{
        homeDta(){
          pageSelect(this.current).then(res=>{
            this.total = res.data.data.total;
            console.log(res);
            this.home = res.data.data.blogList;
          })
        } ,
        details(index){
          console.log(index)
          const _this = this;
          _this.$router.push(`/Details/${index}`)
        },
        handleCurrentChange(val) {
          this.current=val;
          pageSelect(this.current).then(res=>{
            console.log(res)
            this.total = res.data.data.total;
            this.home = res.data.data.blogList;
          })
          console.log(`当前页: ${val}`);
        },
      }
    }
</script>

<style scoped lang="scss">
.block{
  margin-top: 20px;
 margin-right: 25px;

}
</style>
